<template>
  <div class="approveInput">
      <div class="title">
          <img src="../../../../assets/img/icon_identity.png" alt="">
          <p>
              <b>身份认证</b>
              <br>
              <span>仅支持中国居民身份证进行实名认证</span>
          </p>
      </div>
      <div class="form">
        <div class="item">
            <p>真实姓名</p>
            <p class="input"><input type="text"></p>
        </div>
        <div class="item">
            <p>身份证号</p>
            <p class="input"><input type="text"></p>
        </div>
        <div class="form_btn" @click="popupShow=true"><ibutton>提交审核</ibutton></div>
      </div>
        <popup v-if="popupShow">
                <div class="hint">
                    <i class="iconfont icon-tanhao"></i>
                    <span>实名认证信息通过后将无法修改,冒用他人信息将会导致账号被分封。</span>
                    <span>是否提交？</span>
                </div>
                <div class="popup_btn">
                    <span class="btn_cancel" @click="popupShow=false">修改信息</span>
                    <span class="btn_ok" @click="$router.push('approving')">确认提交</span>
                </div>
        </popup>
  </div>
</template>

<script>
    import ibutton from '@/components/common/ibutton'
    import popup from '@/components/common/popup'
    export default {
        name:'approveInput',
        data(){
            return{
                popupShow:false
            }
        },
        components:{
            ibutton,
            popup
        },
        methods:{
            submit(){

            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../../style/var.scss';
    .approveInput{
        width:100%;
        height:100%;
        background:#eaeaea;
        .title{
            display: flex;
            align-items: center;
            padding:50px;
            margin-bottom:50px;
            background:#fff;
            img{width:200px; padding-right:20px;}
            span{color:$font_color_sub;}
        }
        .form{
            width:100%;
            height:100%;
            background:#fff;
            padding:50px;
            p{
                padding:30px 0;
                border-radius: 10px;
            }
            .input{
                border:1px solid $border_base;
            }
        }
        .form_btn{padding:100px 0;}

        .hint{
            display: flex;
            align-items: center;
            flex-direction: column;
            width:800px;
            padding:50px;
            border-bottom:1px solid $border_base;
            .iconfont{
                font-size: 50px;
                color:$primary;
            }
        }
        .popup_btn{
            display: flex;
            align-items: center;
            justify-content: space-around;

            span{
                display: inline-block;
                width:50%;
                text-align: center;
                padding:50px;
            }
            .btn_ok{
                color:$primary;
                border-left:1px solid $border_base;
            }
        }
    }
</style>
